<template>
<div>
 <!-- 使用Element UI的卡片组件来展示公告详情 -->
  <el-card class="rounded-3xl">
    <template #header>
      <div class="title">
        <!-- 标题和返回按钮的布局 -->
        <div class="flex justify-between items-center">
          <h2>公告详情</h2>
          <el-button type="primary" plain size="large" @click="$router.go(-1)">
            返回列表
          </el-button>
        </div>
      </div>
    </template>
    <div v-loading="loading" class="p-8 pt-0">
      <!-- 公告标题和发布信息的容器 -->
      <div
        class="py-5 border-b border-gray-200 flex flex-col justify-center items-center"
      >
        <h1 class="text-3xl mb-3">{{notice.mTitle}}</h1>
        <div class="flex justify-center items-center gap-4">
          <p class="text-base mb-3 text-gray-500">类型：<span>{{notice.mType}}</span></p>
          <p class="text-base mb-3 text-gray-500">发布时间：<span>{{formatToLocalTime(notice.mDate, "YYYY-MM-DD") }}</span></p>
        </div>
      </div>
      <!-- 公告内容 -->
      <div class="py-8 min-h-[50vh]">{{ notice.mContent }}</div>
    </div>
  </el-card>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
// 导入ApiNotice，用于发起API请求获取公告详情
import { ApiNotice } from "@/core/api/index.js";
// 导入formatToLocalTime，一个工具函数，可能用于日期格式化
import {formatToLocalTime} from "@/core/utils/dateFormat.js";
// 导入useRouter，Vue Router的钩子，用于导航和路由参数
import {useRoute} from "vue-router";

// 定义加载状态响应式引用
const loading = ref(false);

// 创建响应式引用notice，用于存储公告详情数据
const notice = ref({
  mContent: "",
  mDate: "",
  mTitle: "你好",
  mType: "测试",
});

// 使用useRouter钩子创建router实例
const route = useRoute();

// 定义getShowInfo函数，用于获取公告详情
const getShowInfo = async () => {
  // 显示加载状态
  loading.value = true;
  // 调用API获取公告详情
  const response = await ApiNotice.getNoticeDetail({
    // 使用路由参数中的id来请求特定公告的详情
    messageId: route.params.id,
  });
  if (response.code == 0) {
    notice.value = response.data;
  }
  // 隐藏加载状态
  loading.value = false;
};
onMounted(() => {
  getShowInfo();
});
</script>
